<template>
	<view class="pug-video-container" :class="[skin]">
		<view class="pug-zl-header">
			<view style="display: flex;">
				<view>
					<image :src="courseItem.img"></image>
				</view>
				<view style="margin-left: 15px;">
					<view class="info">
						<text class="title" :style="{'font-size':fontsize+'px'}">{{courseItem.title}}</text>
					</view>
					<view class="cinfo">
						<text class="presale" v-if="courseItem.isfree==0">免费</text>
						<text class="presale" v-if="courseItem.isnew==1">新品</text>
						<text class="presale p1" v-if="courseItem.ispush==1">推荐</text>
						<text class="presale p2" v-if="courseItem.ishot==1">最热</text>
						<text class="presale p3" v-if="courseItem.coursetype==1">基础类</text>
						<text class="presale p3" v-if="courseItem.coursetype==2">进阶类</text>
						<text class="presale p3" v-if="courseItem.coursetype==3">面试类</text>
						<text class="presale p3" v-if="courseItem.coursetype==4">实战类</text>
						<text class="presale p4" @click="handleCopy(3)">
						<text class="piconfont icon-lianjie" style="font-size:12px;padding-right: 4px;"></text>
						复制</text>
					</view>
					<text class="presale" v-if="courseItem.discountprice>0 && courseItem.isnew==1" @click="goBuy">上新特惠
						<text>立减去￥{{courseItem.discountprice}}元</text></text>
					<view class="author">
						<view class="avatar">
							<image :src="courseItem.avatar" mode=""></image>
							<text class="username">{{courseItem.nickname}}</text>
						</view>
						<view class="parsebox" v-if="showZanFlag">
							<button @click="handleSaveParise" v-if="parseFlag">点赞</button>
							<button @click="handleCancelParise" v-if="!parseFlag">取消点赞</button>({{pariseCount}})
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="margin-top: 5px" v-if="isBuy==0">
			<u-alert v-if="userItem.vip>1 && userItem.vip<5" type="success" @click="goBuy" closable
				description="提示: 你是VIP用户, 享有0.8折的优惠! 点击前往>>>"></u-alert>
			<u-alert v-if="userItem.vip==5" type="error" @click="goBuy" closable
				description="提示: 你是超级VIP, 享有0.6折的优惠!  点击前往购买>>>"></u-alert>
			<!-- <pug-coupon :type="1" :opid="id" @goto="goBuy" @over="handleFilters"></pug-coupon> -->
		</view>
		<view class="book-bought">
			<view class="learn-duration">
				<view class="total-people">{{courseItem.coursetimer}}</view>
				<view class="total-time">时长</view>
			</view>
			<view class="byte-divider byte-divider--vertical"></view>
			<view class="learn-people">
				<view class="total-people">{{courseItem.coursebuy || 0}} 人</view>
				<view class="total-time">学习</view>
			</view>
			<view class="byte-divider byte-divider--vertical"></view>
			<view class="learn-people">
				<view class="total-people">{{courseItem.beginer}}</view>
				<view class="total-time">程度</view>
			</view>
			<view class="byte-divider byte-divider--vertical"></view>
			<view class="learn-people">
				<view class="total-people">
					<text v-if="courseItem.finished==0">更新中</text>
					<text v-if="courseItem.finished==1">已完结</text>
				</view>
				<view class="total-time">状态</view>
			</view>
		</view>
		<view class="pug-zl-nav">
			<u-tabs :list="list2" :current="current" @change="handleChange"
				:activeStyle="{'color':'#666','fontWeight':'700'}" :itemStyle='{"height":"50px","background":"#fff",}'
				:scrollable="false"></u-tabs>
		</view>
		<view class="pug-zl-content">
			
			<!-- 课程简介 -->
			<view v-if="current==0">
				<view class="info-content">
					<view class="tit">课程简介</view>
					<view class="desc">{{courseItem.description}}</view>
					<view class="tit">课程介绍</view>
					<markdownParse :resource="courseItem.content"></markdownParse>
				</view>
			</view>
			
			
			<!-- 课程目录 -->
			<view class="pug-chapter-box" v-if="current==1">
				<pug-chapter-tabbar
					:cindex="currentIndex"
					:chapterindex="chapterIndex"
					:lessonindex="lessonIndex"
					@change="handleTarbar"
					:dataList="chapterLessons"></pug-chapter-tabbar>
				<pug-course-chapterlesson
					:chapterindex="chapterIndex"
					:lessonindex="lessonIndex"
					@change="handleTarbar"
					@chapterdata="handleChapterData"
					ref="chapterRef"
					:courseId="id"></pug-course-chapterlesson>
			</view>
			
		
			
			<view class="pug-info-dd" v-if="current==2">
				
				<!-- 下拉框。弹出层 -->
				<u-popup :show="false">
				    <scroll-view style="height:50vh;" @scrolltolower="handleLoadComment" scroll-y="true" >
				        <view v-for="i in 100" style="padding:10px;border:1px solid #ccc;margin-bottom:5px;">
							出淤泥而不染，濯清涟而不妖
						</view>
				    </scroll-view>
				</u-popup>
				
				<!-- 重磅推荐 -->
				<view class="titbox" @click="handleCopy(1)">
					<view class="tit">百度网盘</view>
					<view class="btn">点击复制</view>
				</view>
				<view class="inf">{{courseItem.downlink}}</view>
				<view class="inf">(密码：{{courseItem.downpwd}})</view>
				<view class="titbox" @click="handleCopy(1)">
					<view class="tit">阿里网盘</view>
					<view class="btn">点击复制</view>
				</view>
				<view class="inf">{{courseItem.alipanlink}}</view>
				<view class="inf">(密码：{{courseItem.alipanpwd}})</view>
				<!-- 重磅推荐 -->
				<view class="titbox" @click="handleCopy(2)">
					<text class="tit">源码下载</text>
					<text class="btn">点击复制</text>
				</view>
				<view class="inf">{{courseItem.giteelink}}</view>
			</view>
			
			
			<!-- 相关课程 -->
			<view v-if="current==3">
				<u-empty v-if="realationCourseList && realationCourseList.length == 0"  mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
				<pug-course-list2 :dataList="realationCourseList"></pug-course-list2>
			</view>
		</view>
		<view class="book-mobile-distribute" v-if="courseItem.isfree == 1 && courseItem.realprice > 0"
			@click="handleOpenShare">
			<view class="value">{{courseItem.commission}}</view>
		</view>
		

		<view class="book-mobile-other">
			<view class="trybox" @click="toHome()">
				<text class="iconfont icon-home" style="font-size:20px;"></text>
				<text>首页</text>
			</view>
			<view class="trybox" @click="handleCopy(4)">
				<text class="iconfont icon-qq"></text><text style="position: relative;bottom:-4px;">QQ交流群</text>
			</view>
			<view class="button--write" @click="handleShare">
				<text class="iconfont icon-fenxiang" style="font-size: 20px;"></text>
				分享
			</view>
			<view class="button--write" @click="toBuy">
				<text class="iconfont icon-chanpinhaibao"></text>
				购买
			</view>
		</view>
		

		
		<!-- 引入分享组件 -->
		<pug-share ref="shareref" @fontsize="handleFontSize" @skin="handleSkin"></pug-share>
		
		<!-- 引入qq和微信组件 -->
		<pug-open-qqweixin ref="openRef"></pug-open-qqweixin>
	</view>
</template>
<script>
	import markdownParse from '@/components/markdownParse/index.vue'
	import request from "@/utils/request.js"
	import throttle from '@/utils/throttle'
	import cache from "@/utils/cache.js";
	export default {
		components: {
			markdownParse
		},

		data() {
			return {
				id: 0,
				courseItem: {},
				current: 0,
				chapterIndex: 0,
				lessonIndex: 0,
				fontsize: this.$cache.get("fontsize") || 16,
				skin: "light",
				pariseCount: 0,
				
				
				currentIndex: 0,
				realationCourseList: [],
				chapterLessons: [],
				// 用于海报的展示
				isshow: false,
				// 海报数据
				painterItem: {},
				// 用户数据
				user: {},
				// 赞
				zanFlag: false,
				// 取消点赞
				czanFlag: false,
				// 控制课程用户是否点赞
				parseFlag: true,
				// 必须等待数据加载完毕，才会显示赞
				showZanFlag: false,
				list2: [{
					name: '介绍',
				}, {
					name: '目录',
				}, {
					name: '下载',
				}, {
					name: '相关',
				}]
			}
		},
		
		
		onBackPress(options) {
			console.log("=================>11111111")
			//避免死循环
			if (options.from === 'navigateBack') return false;
			uni.showModal({
				title: '提示',
				content: '你确定要离开了吗？',
				success: function(res) {
					if (res.confirm) {
						// 退出当前应用，改方法只在App中生效  
						//html5+ 关闭程序，只限于anroid和ios支持 
						//plus.runtime.quit();
						// 返回上一页
						uni.navigateBack()
					  
					} 
				}
			});
			//返回true表示我要自定义onBackPress
			return true
		},


		onLoad(param) {
			// 获取搜索参数
			this.id = param.courseId
			// 查询课程明细
			this.getCourseDetail()
			// 获取缓存中用户的信息
			this.user = this.$cache.get("user")
		},


		methods: {
			// 点赞
			async handleSaveParise(){
				let courseTitle = this.courseItem.title
				let courseImg = this.courseItem.img
				let params = {courseId:this.id,courseImg,courseTitle}
				if(this.zanFlag){
					return
				}
				// 限流
				this.zanFlag = true
				const response = await this.$request.post(this.$api.insertCourseParise,params)
				console.log("response",response)
				if(response.flag){
					// 限流
					this.zanFlag = false
					// 如果我点赞了，就把这个变成取消点赞
					this.parseFlag = false
					// 每次点击点赞的时候，同步我们的总点赞数
					this.pariseCount = response.pariseCount
					uni.showToast({
						title: "点赞成功"
					})
				}
			},
			// 取消点赞
			async handleCancelParise(){
				if(this.czanFlag){
					return
				}
				// 限流
				this.czanFlag = true
				const response = await this.$request.post(this.$api.cancelCoursePrise + "/" + this.id)
				console.log("response",response)
				if(response.flag){
					// 限流
					this.czanFlag = false
					// 如果我取消赞了，就把这个变成点赞
					this.parseFlag = true
					// 每次取消点击点赞的时候，同步我们的总点赞数
					this.pariseCount = response.pariseCount
					uni.showToast({
						title: "取消点赞"
					})
				}
			},
			
			// 根据id查询当前文章的信息
			async getCourseDetail(){
				const resData = await this.$request.post(this.$api.getCourseDetail + "/" + this.id)
				this.courseItem = resData.course
				
				// 获取课程的总点赞数
				this.pariseCount = resData.pariseCount
				// 查询用户是否点过赞
				this.parseFlag = !resData.userParise
				// 等待数据全部返回成功
				this.showZanFlag = true
			},
			// 查询相关课程
			async loadRelationCourse(){
				let params = {pageNo:1,pageSize:3,cid:this.courseItem.categoryId,opid:this.id}
				const resData = await this.$request.post(this.$api.findCoursePageRelation,params)
				console.log("resData================",resData)
				this.realationCourseList = resData.courses
			},
			
			handleCopy(flag) {
				var data = "";
				var that = this;
				var title = "复制成功!"
				if (flag == 0) {
					data = this.courseItem.qqgroupcode
					title = "QQ群：" + data + "，复制成功!"
				} else if (flag == 1) {
					data = "百度网盘：" + this.courseItem.downlink + "，密码是：(" + this.courseItem.downpwd + ")"
					data += "\n阿里网盘：" + this.courseItem.alipanlink + "，密码是：(" + this.courseItem.alipanpwd + ")"
					title = "网盘地址，复制成功!";
				} else if (flag == 2) {
					data = this.courseItem.giteelink
					title = "源码地址，复制成功!"
				} else if (flag == 3) {
					data = "书籍是：《" + this.courseItem.title + "》"
					data += "\n出品时间：" + this.courseItem.createTime;
					data += "\n书籍描述：" + this.courseItem.description;
					data += "\n阅读地址：https://www.txnh.net/course/detail/" + this.courseItem.id
				} else if (flag == 4) {
					data = this.courseItem.qqgroupcode || "123456789"
					title = "QQ群：" + data + "，复制成功!"
				} else if (flag == 5) {
					data = this.courseItem.qqcode
					title = "QQ：" + data + "，复制成功!"
				}

				uni.setClipboardData({
					data,
					success: function() {
						uni.showToast({
							icon: "none",
							title
						})
						that.$refs.openRef.handleOpen();
					}
				})
			},
			// 更改字体
			handleFontSize(fontsize){
				this.fontsize = fontsize || 16
			},
			// 更改皮肤
			handleSkin(skin){
				this.skin = skin;
			},
			handleChange(item) {
				this.current = item.index
				if(item.index == 3){
					// 查询相关课程
					this.loadRelationCourse()
				}
			},
			handleChapterData(chapterLessons){
				this.chapterLessons = chapterLessons;
			},
			handleTarbar(obj){
				// console.log(obj)
				this.chapterIndex = obj.chapterIndex
				this.lessonIndex = obj.lessonIndex
				this.currentIndex = obj.currentIndex
				
				// 章展开控制
				this.$refs.chapterRef.handleChapterExpand(this.chapterIndex)
			},
			// 加载评论
			handleLoadComment(){
				
			},
			// 购买展品
			toBuy(){
				uni.navigateTo({
					url: `/pages/pay/pay?buyid=${this.id}`
				})
			},
			// 去首页
			toHome(){
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			// 海报分享
			handleShare(){
				
				this.painterItem.userId = this.user.id
				this.painterItem.avatar=this.user.avatar
				this.painterItem.nickname=this.user.nickname || "未知"
				this.painterItem.image=this.courseItem.img
				this.painterItem.price=this.courseItem.price || ""
				this.painterItem.realprice=this.courseItem.realprice || ""
				this.painterItem.title=this.courseItem.title || ""
				this.painterItem.categoryname=this.courseItem.categoryname || ""
				this.painterItem.opid = this.courseItem.id
				this.painterItem.description = this.courseItem.description
				// 这个地方一般放的是h5地址，或者小程序的推广地址或者是app的打开地址
				// this.painterItem.qrcode="http://www.kuangstudy.com/course/detail/"+this.courseItem.id+"?uid="+this.user.id+"&type=course"
				this.painterItem.qrcode="https://www.kuangstudy.com/course/detail/1377518279077142529"+"?uid="+this.user.id+"&type=course"
				this.$refs.shareref.openShare(this.painterItem)
				
			},
			
		}
	}
</script>
<style lang="scss" scoped>
	// 黑色主题
	.dark{
		.pug-info-dd {
			background:#000;
		}
	}
	// 淡色主题
	.light{
		.pug-info-dd {
			background:#fff;
		}
	}
	
	.pug-video-container {
		padding-top: 80rpx;
		padding-bottom: 120rpx;
	}

	.pug-info-dd {
		padding: 40rpx;
		background: #fff;
		word-break: break-word;

		.titbox {
			display: flex;
			justify-content: space-between;
			margin: 10px 0;
			background: #f8f8f8;
			padding: 8px;

			.tit {
				font-weight: 800;
				font-size: 28rpx;
			}

			.btn {
				font-size: 12px;
			}
		}

		.inf {
			font-size: 28rpx;
			padding: 10rpx 0;
		}

	}

	.pug-chapter-box {
		.play-rate {
			padding: 30rpx 0 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #fff;
			margin-top: 5rpx;
		}

		.chapter-item {
			.chapter-title {
				display: flex;
				margin: -1px 0;
				align-items: center;
				padding: 30rpx 0 30rpx 30rpx;
				border-top: 1px solid #eee;
				border-bottom: 1px solid #eee;
				font-size: 26rpx;
				word-break: keep-all;

				.iconfont {
					padding-right: 12rpx;
				}

				.tit {
					font-weight: 600;
				}
			}

			.lessons-box {
				&_item {
					padding: 30rpx 20rpx 30rpx 35rpx;
					border-bottom: 1px solid #e0e3e6;
					box-sizing: border-box;
					font-size: 24rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					&:last-child {
						border-bottom: none;
					}

					.iconfont {
						padding-right: 12rpx;
					}

					.info {
						display: flex;
						align-items: center;
					}
				}
			}
		}
	}

	.info-content {
		margin-top: 5rpx;
		background: #fff;
		padding: 40rpx;

		.tit {
			font-size: 32rpx;
			font-weight: 700;
			;
			margin: 20px 0;
		}

		.desc {
			font-size: 28rpx;
			color: #333;
		}
	}

	.book-mobile-distribute {
		position: fixed;
		bottom: 10%;
		right: 0;
		z-index: 999;
		height: 28px;
		line-height: 28px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-image: url('@/static/images/tuiguagn.png');
		background-repeat: no-repeat;
		background-size: cover;
		white-space: nowrap;
	}

	.book-mobile-distribute .value {
		font-family: "alibaba puhui font";
		margin: -1px 7px 0 79px;
		font-size: 15px;
		font-weight: 700;
		letter-spacing: 0;
		text-align: left;
		color: #fff;
		text-shadow: 0 1px 1px rgba(46, 53, 213, 0.25);
	}


	.book-mobile-other {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		width: 100vw;
		z-index: 499;
		padding: 12px 20px 20px;
		background: #fff;
		border-top: 1px solid #F8F8F8;
	}

	.book-mobile-other .button--write {
		flex-grow: 1;
		border-radius: 4px;

		.iconfont {
			padding-right: 4px;
			font-size: 14px;
		}
	}

	.trybox {
		display: flex;
		flex-direction: column;
		font-size: 12px;
		justify-content: center;
		align-items: center;
		margin-right: 15px;
	}

	.button--write {
		height: 40px;
		line-height: 38px;
		font-size: 14px;
		padding-left: 18px;
		padding-right: 18px;
		color: #1e80ff;
		text-align: center;
		background-color: rgba(30, 128, 255, .05);
		border: 1px solid rgba(30, 128, 255, .3);
		margin-left: 10px;
		border-radius: 4px;
	}

	.book-mobile-other .buy-box {
		flex-basis: 135px;
		flex-grow: 1;
		margin-left: 0.8rem;
	}

	.book-mobile-other .button--buy {
		width: 100%;
		display: block;
		height: 40px;
		font-size: 14px;
		padding: 0 16px;
		background-color: #007fff;
		color: #fff;
		text-align: center;
		border-radius: 4px;
		box-sizing: border-box;
	}

	.button--buy .discount-price {
		width: 100%;
		height: 20px;
		font-size: 12px;
		line-height: 20px;
	}

	.button--buy .normal-price {
		width: 100%;
		height: 12px;
		text-decoration: line-through;
		font-size: 12px;
		line-height: 12px;
		opacity: .8;
	}

	.button--buy .normal-price-2 {
		width: 100%;
		height: 12px;
		font-size: 12px;
		line-height: 12px;
		opacity: .8;
	}

	.book-bought {
		display: flex;
		align-items: center;
		padding: 30rpx 10rpx;
		justify-content: space-between;
		background: #fff;
		border-radius: 8rpx;
		height: 80rpx;
		font-style: normal;
		font-weight: 400;
		font-size: 24rpx;
		margin-bottom: 5px;

		.learn-duration {
			flex: 1;
		}

		.learn-people {
			flex: 1;
		}

		.byte-divider--vertical {
			background: #e6e8eb;
			font-size: 1em;
			margin: 0 8px;
			display: inline-block;
			height: 60%;
			width: 1px;
			vertical-align: middle;
			position: relative;
			top: -0.06em;
		}

		.total-people {
			text-align: center;
			font-weight: 800;
			font-size: 24rpx;
			color: #666;
			line-height: 48rpx;
		}

		.total-time {
			text-align: center;
			opacity: .6;
			line-height: 40rpx;
		}
	}

	.pug-zl-nav {
		border-top: 1px solid #eee;
		border-bottom: 1px solid #eee;
	}


	.pug-zl-header {
		padding: 60px 20px 0;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;

		image {
			width: 200rpx;
			height: 268rpx;
		}

		.author {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20rpx;
			color: #999580;

			.avatar {
				display: flex;
				align-items: center;

				.username {
					font-size: 24rpx;
				}
			}

			.group {
				font-size: 12px;
				font-weight: 500;

				>image {
					width: 100%;
					height: 100%;
				}
			}

			.avatar>image {
				width: 26px;
				height: 26px;
				border-radius: 50%;
				margin-right: 8px;
			}
		}

		.desc {
			min-height: 0;
			line-height: 20px;
			margin-top: 20px;
			font-size: 22rpx;
		}

		.info {
			font-size: 14px;

			.title {
				font-size: 32rpx;
				font-weight: 600;
				color: #666;
			}
		}
	}

	.cinfo {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.presale {
		vertical-align: middle;
		display: inline-block;
		height: 20px;
		line-height: 20px;
		font-size: 12px;
		border-radius: 2px;
		padding-left: 6px;
		padding-right: 6px;
		color: #fff;
		cursor: default;
		margin-right: 5px;
		background-color: #f64242;
	}

	.presale.p1 {
		background: #f9ae3d;
	}

	.presale.p2 {
		background: #5ac725;
	}

	.presale.p3 {
		background: #f56c6c;
	}

	.presale.p4 {
		background: #3c9cff;
	}

	.try-text {
		font-size: 12px;
		color: #5ac725;
		padding-left: 5px;
	}
</style>
